<template>
  <div class="pageContent">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row :gutter="20">
            <el-col :span="4"><span style="display: inline-block;vertical-align: middle;line-height: 40px;">平台通讯录信息</span></el-col>
            <el-col :span="6" :offset="10">
              <div style="display: inline-block;vertical-align: middle;line-height: 40px;">
                <div style="display: inline-block;vertical-align: middle;">
                  <el-input size="small" v-model="tableSearchCon" @blur="inputBlur" placeholder="请输入搜索姓名" style="display: inline-block;width: 70%;"></el-input>
                  <el-button size="small" type="primary" @click="tableContentSearch">搜索</el-button>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div style="display: inline-block;vertical-align: middle;line-height: 40px;">
                <el-button type="primary" size="small" @click="addPageInfo">新增</el-button>
                <el-button type="danger" size="small" @click="removeTable">删除</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="logonRelease_content notSize">
          <el-table
            :data="tableData"
            @select="tableCheck"
            stripe
            height="340"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              width="50"
              align="center"
              label="序号">
              <!--<template slot-scope="scope">-->
                <!--<span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>-->
              <!--</template>-->
              <template slot-scope="scope">
                <span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              width="120"
              align="center"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="dept"
              align="center"
              label="部门">
            </el-table-column>
            <el-table-column
              prop="duies"
              align="center"
              label="职务">
            </el-table-column>
            <el-table-column
              prop="email"
              align="center"
              width="120"
              label="电子邮件">
            </el-table-column>
            <el-table-column
              prop="mobilePhone"
              align="center"
              label="移动电话">
            </el-table-column>
            <el-table-column
              prop="telePhone"
              align="center"
              label="固定电话">
            </el-table-column>
            <el-table-column
              prop="wechat"
              align="center"
              label="微信号">
            </el-table-column>
            <el-table-column
              prop="qq"
              align="center"
              label="QQ号">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              width="200"
              label="联系地址">
            </el-table-column>
            <el-table-column
              prop="office"
              align="center"
              width="200"
              label="办公地点">
            </el-table-column>
            <el-table-column
              prop="remarks"
              align="center"
              width="200"
              label="备注信息">
            </el-table-column>
            <el-table-column
              align="center"
              width="80"
              fixed="right"
              label="修改">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle @click="changeBtn(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="tablePage" style="margin-top: 6px">
          <el-pagination
            background
            @current-change="handleSizeChange"
            :page-size="postList.rowBounds.limit"
            layout="prev, pager, next"
            :total="pageSize.count">
          </el-pagination>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      myDataId: [],
      checkData: [],
      tableSearchCon: '',
      serialNumber: 1,
      pageSize: {},
      postList: {
        'condition': [
          { // 用户名
            property: 'name',
            value: '',
            type: 'LIKE'
          }
        ],
        'rowBounds': {
          'offset': 0,
          'limit': 10
        }
      },
      tableData: []
    }
  },
  computed: {

  },
  filters: {
    loginSuccess: function(value) {
      if (value == 0) {
        return '否'
      } else {
        return '是'
      }
    }
  },
  components: { },
  /**
   * 组件创建完成后，查询列表数据
   */
  created() {

  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() { // 获取内容
      this.$store
        .dispatch('AddressBookInformationSelect', this.postList)
        .then(res => {
          this.tableData = res.data.records
          this.pageSize = res.data
        })
        .catch(() => {

        })
    },
    changeBtn(arr) {
      this.$router.push({ name: 'changeInfo', params: { id: arr.id }})
    },
    removeTable() {
      if (this.checkData.length != 0) {
        for (var i = 0; i < this.checkData.length; i++) {
          this.myDataId.push({
            id: this.checkData[i].id
          })
        }
        this.$store
          .dispatch('AddressBookInformationRemoveAll', this.myDataId)
          .then(res => {
            this.fetchData()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
          .catch(() => {

          })
      }
    },
    tableCheck(selection, row) {
      this.checkData = selection
    },
    addPageInfo() {
      this.$router.push({ name: 'addInfo' })
    },
    inputBlur() { // 搜索框失去焦点
      if (this.tableSearchCon == '') {
        const num = this.dataFor(this.postList.condition, 'name')
        this.postList.condition[num].value = ''
        this.fetchData()
        this.serialNumber = 1
      }
    },
    handleSizeChange(val) { // 分页
      this.postList.rowBounds.offset = (val - 1) * 10
      this.serialNumber = val
      this.fetchData()
    },
    selectSearch(val) { // 是否发送成功搜索
      if (val == 2) {
        const num = this.dataFor(this.postList.condition, 'sendFlag')
        this.postList.condition[num].value = ''
        this.fetchData()
      } else {
        const num = this.dataFor(this.postList.condition, 'sendFlag')
        this.postList.condition[num].value = val
        this.fetchData()
      }
    },
    tableContentSearch() { // 用户名搜索
      if (this.tableSearchCon) {
        this.postList.rowBounds.offset = 0
        this.serialNumber = 1
        const num = this.dataFor(this.postList.condition, 'name')
        this.postList.condition[num].value = this.tableSearchCon
        this.fetchData()
      } else {
        this.serialNumber = 1
        const num = this.dataFor(this.postList.condition, 'name')
        this.postList.condition[num].value = ''
        this.fetchData()
      }
    },
    dataFor(arr, myData) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i].property == myData) {
          return i
        }
      }
    }
  }
}
</script>
<style scoped>
  .logonRelease_title span{
    font-size: 22px;
    color: #333333;
    display: inline-block;
  }
  .logonRelease_content{
    width: 100%;
  }
  .notSize .el-table__empty-text{
    display: none;
  }
</style>

